import React from 'react';
import {Link} from 'dva/router';
import {defaultImg} from '../../config/config';
import {Table, Badge, Divider, Popconfirm, Button, Modal, Avatar, Tooltip, Icon} from 'antd';
import styles from './FundingTable.less';

export default class FundingTable extends React.PureComponent {

  cleanSelectedKeys = () => {
    this.props.dispatch({
      type: 'funding/cleanSelectedKeys',
    });
  };

  showBatchDeleteConfirm = () => {
    const {dispatch, selectedRowKeys} = this.props;

    Modal.confirm({
      title: `确定删除已选中 ${selectedRowKeys.length} 项?`,
      content: 'Some descriptions',
      okText: 'Yes',
      okType: 'danger',
      cancelText: 'No',
      onOk() {
        dispatch({
          type: 'funding/removeByIds',
        });
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  };

  remove = (id) => {
    this.props.dispatch({
      type: 'funding/remove',
      payload: id,
    });
  };

  render() {
    const {dispatch, loading, list, pagination, selectedRowKeys, query, onTableChange} = this.props;

    const status = ['未审核', '通过', '未通过', '审核中'];
    const statusMap = ['default', 'success', 'error', 'processing'];

    const columns = [{
      title: '图片',
      dataIndex: 'img',
      render: text => <Avatar shape="square" size="large" src={text || defaultImg}/>,
      width: 50,
    }, {
      title: '名称',
      render: record => (
        <Tooltip placement="topLeft" title={record.name}>
          <Link className={styles.name} to={`funding/${record.id}/edit`}>{record.name}</Link>
        </Tooltip>
      ),
      width: 250,
    }, {
      title: '标签',
      dataIndex: 'tags',
    }, {
      title: '状态',
      dataIndex: 'status',
      filters: [{
        text: status[0],
        value: 0,
      }, {
        text: status[1],
        value: 1,
      }, {
        text: status[2],
        value: 2,
      }, {
        text: status[3],
        value: 3,
      }],
      filterMultiple: false,
      filteredValue: new Array(query.status || '') || null,
      render: val => <Badge status={statusMap[val]} text={status[val]}/>,
    }, {
      title: '更新时间',
      dataIndex: 'created_at',
      sorter: true,
      sortOrder: query.sort === 'created_at' && query.order,
    }, {
      title: '操作',
      render: record => (
        <div>
          <Link to={`funding/${record.id}/edit`}>编辑</Link>
          <Divider type="vertical"/>
          <Popconfirm title="是否要删除此项？" onConfirm={() => this.remove(record.id)}>
            <a>删除</a>
          </Popconfirm>
        </div>
      ),
    }];

    const tableProps = {
      loading: loading.effects['funding/bGetPage'],
      columns,
      dataSource: list,
      rowKey: record => record.id,
      rowSelection: {
        selectedRowKeys,
        onChange: keys => {
          dispatch({
            type: 'funding/bUpdateState',
            payload: {
              selectedRowKeys: keys,
            },
          });
        },
        getCheckboxProps: record => ({
          disabled: record.disabled,
        }),
      },
      pagination,
      onChange: onTableChange,
    };

    return (
      <div className={styles.fundingTable}>
        <div className={styles.toolBar}>
          <Link to={`funding/new`}><Button type="primary" icon="plus" className={styles.MR8}>新建</Button></Link>
          {selectedRowKeys.length > 0 &&
          <span className={styles.pullRight}>
							<span className={styles.MR8}>{`已选 ${selectedRowKeys.length} 项 `}</span>
							<Button type="danger" className={styles.MR8} onClick={this.showBatchDeleteConfirm}>批量删除</Button>
							<Button onClick={this.cleanSelectedKeys}>取消选择</Button>
						</span>
          }
        </div>
        <Table {...tableProps} />
      </div>
    );
  }
}
